<template>
    <div>
        
        <input type="text" v-model="message" >


        <div v-show="flag">

            你能看见我

        </div>

        <div v-if="num==10">

            num = {{ num }}

        </div>
        <div v-else-if="num==9">

            num = 9

        </div>
        <div v-else>

            num != 10

        </div>


        {{ message + '不好啊' }}


        {{ message.split("").reverse().join("") }}

        <br /><br />


        <ul>
            <li v-for='item in tlist'>
                {{ item.text }}
            </li>
        </ul>


        <br /><br />

        翻转前 : {{ message }}
        <br />
        翻转后 : {{ reverse_message }}


        <br /><br />

        <table>
            <tr v-for="(item,index) in datalist">
                <td>{{ item.name }}</td>
                <td>
                    <button @click="minus(index)" >-</button>
                    <input type="text" v-model="item.num" />
                    <button @click="add(index)" >+</button>
                </td>
            </tr>
        </table>

        <br />

        <button @click="add_cart('宝马')">添加宝马</button>

        <button @click="add_cart('电脑')">添加电脑</button>



    </div>
</template>
   
  <script>

    import {config,formatXml} from '../config.js'


  export default {
    data () {
      return {

        message:'hello world 你好',
        tlist:[{text:'汽车'},{text:'面包'},{text:'牛奶'}],
        flag:1,
        num:9,
        datalist:[]
      
      }
    },
    //监听属性
    computed:{

        reverse_message:function(){

            return this.message.split('').reverse().join('')

        }

    },
    //钩子方法
    mounted:function(){

        console.log(config['baseurl']);
        console.log(formatXml(123));

        //定义购物车数据
        var mydata = [{name:'汽车',num:0},{name:'电脑',num:0},{name:'手机',num:0}];

        //将购物车数据存入cookie,过期时间为7天
        this.jscookie.set('cart',mydata,{expires:7});

        //将购物车数据从cookie取出，同时将字符串转为json
        var data = JSON.parse(this.jscookie.get('cart'));
        this.datalist = data;

    },
    //绑定事件
    methods:{

        //添加购物车逻辑
        add_cart:function(name){

            let cartlist = this.datalist;

            let findgood = 0;

            for(let i=0,l=cartlist.length;i<l;i++){


                    if(name == cartlist[i]['name']){

                        cartlist[i]['num']++;
                        findgood = 1;
                        break;

                    }
            }

            if(findgood==0){

                cartlist.push({name:name,num:1});

            }

            this.datalist = cartlist;

        },
        add:function(index){

            this.datalist[index].num++;

        },
        minus:function(index){

            if( this.datalist[index].num > 0){

            this.datalist[index].num--;

        }

        }

    }
  }
  </script>
   
<style>




</style>